<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-04 10:32:51
 * @Description  : 菜单
-->

<template>
  <div class="wp-menu">
    <wp-menu2
      :items="items"
      :openItems="openItems"
      :defaultIndex="activeIndex"
      @changeActiveIndex="handleActiveIndex"
      @toggleMenu="toggleSubMenu"
    ></wp-menu2>
  </div>
</template>

<script lang="ts" setup>
import useSettingsStore from '@/stores/modules/settings'
import WpMenu2 from './WpMenu2.vue'
import type { IndexObj } from '@/types/commom'

const router = useRouter()

const settingsStore = useSettingsStore()

const props = defineProps<{
  items: IndexObj[]
}>()

const emits = defineEmits<{
  (e: 'menuItemClick', value: IndexObj): void
}>()

const activeIndex = ref(-1)
// 展开的菜单项
const openItems = ref<any[]>([])

const handleActiveIndex = (value: IndexObj) => {
  activeIndex.value = value.id
  settingsStore.setMenuActiveIndex(value)
  emits('menuItemClick', value)
}

const isOpen = (item: IndexObj) => {
  return openItems.value.includes(item.id)
}

const toggleSubMenu = (item: IndexObj) => {
  if (isOpen(item)) {
    openItems.value = openItems.value.filter((id) => id !== item.id)
  } else {
    openItems.value.push(item.id)
  }
}

// 根据ID找到到当前项的通路ID数组
const findMenuPath = (
  menuItems: IndexObj[],
  itemId: number,
  path: IndexObj[] = []
): any[] | null => {
  for (let i = 0; i < menuItems.length; i++) {
    const menuItem = menuItems[i]

    // 如果当前菜单项的ID匹配目标ID，则返回当前路径数组
    if (menuItem.id === itemId) {
      return path.concat(menuItem)
    }

    // 如果当前菜单项有子菜单项，则递归查找子菜单项
    if (menuItem.children && menuItem.children.length > 0) {
      const childPath = findMenuPath(
        menuItem.children,
        itemId,
        path.concat(menuItem)
      )

      // 如果在子菜单项中找到了目标ID，则返回子菜单项的路径数组
      if (childPath) {
        return childPath
      }
    }
  }

  // 如果在当前菜单项及其子菜单项中未找到目标ID，则返回null
  return null
}

onMounted(() => {
  activeIndex.value = settingsStore.menuActive?.id || -1
  const res = findMenuPath(props.items, activeIndex.value)
  if (res && res.length > 1) {
    openItems.value = res.slice(0, res.length - 1).map((item) => item.id)
  }
})

watch(
  () => router.currentRoute.value.name,
  () => {
    activeIndex.value = settingsStore.menuActive?.id || -1
    const res = findMenuPath(props.items, activeIndex.value)
    if (res && res.length > 1) {
      openItems.value = res.slice(0, res.length - 1).map((item) => item.id)
    }
  },
  {
    deep: true
  }
)

watch(
  () => props.items,
  (newValue) => {
    activeIndex.value = settingsStore.menuActive?.id || -1
    const res = findMenuPath(newValue, activeIndex.value)
    if (res && res.length > 1) {
      openItems.value = res.slice(0, res.length - 1).map((item) => item.id)
    }
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="scss">
.wp-menu {
  overflow-y: auto;
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar-track-piece {
    background-color: rgba(100, 100, 100, 0.2);
    border-radius: 12px !important;
  }

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.6);
    background-clip: padding-box;
    min-height: 10px;
    border-radius: 12px !important;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.6);
    border-radius: 12px !important;
  }
}
</style>
